<template>
  <el-form :model="form" label-width="100px">
    <el-form-item label="审核日期">
      <el-col :span="230">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="form.createDate"
          style="width: 200px"
          format="YYYY年MM月DD日"
        ></el-date-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="状态">
      <el-input style="width: 350px" v-model="form.status"></el-input>
    </el-form-item>
  </el-form>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">搜索</el-button>
  </el-form-item>

  <!-- 数据表 -->
  <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    style="width: 100%"
  >
    <el-table-column property="modifier" label="修改人" width="150px">
    </el-table-column>
    <el-table-column property="auditor" label="审核人" width="150px">
    </el-table-column>
    <el-table-column property="createTime" label="创建时间" width="200px">
    </el-table-column>
    <el-table-column property="checkTime" label="审核时间" width="150px">
    </el-table-column>
    <el-table-column property="flightType" label="航班类型" width="150px">
    </el-table-column>

    <el-table-column label="状态">
      <template #default="scope">
        <span>{{ scope.row.checkStatus }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="1200px">
      <template #default="scope">
        <el-button
          type="success"
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          >详情</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :total="count"
    :current-page="page"
    :pageCount="pageCount"
    @current-change="changePage"
  >
  </el-pagination>

  <el-dialog v-model="dialogVisible" width="50%">
    <h2 style="text-align: center">{{ dialogTitle }}</h2>
    <br />
    <el-form
      :model="user"
      label-width="120px"
      :size="formSize"
      id="editForm"
      :rules="rules"
      ref="ediForm"
    >
      <el-form-item label="航班号" prop="dfltFlno">
        <el-input v-model="check.dfltFlno" />
      </el-form-item>
      <el-form-item label="航空公司" prop="dfltAwcd">
        <el-input v-model="check.dfltAwcd" />
      </el-form-item>
      <el-form-item label="航线路由" prop="apcd">
        <el-input v-model="check.apcd" />
      </el-form-item>
      <el-form-item label="日期" prop="dtime">
        <el-input v-model="check.dtime" />
      </el-form-item>
      <el-form-item label="计划起飞时间" prop="fptt">
        <el-input v-model="check.fptt" />
      </el-form-item>
      <el-form-item label="预计降落时间" prop="fplt">
        <el-input v-model="check.fplt" />
      </el-form-item>
      <el-form-item label="原因" prop="flightStatus">
        <el-input v-model="check.flightStatus" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm"> 确定修改 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
    <script>
export default {
  name: "check",
  data() {
    return {
      checkStatus: "",
      dialogVisible: false,
      dialogTitle: "详情",
      selectLabel: 0,
      tableDataType: 1,
      called: false,
      formLabelWidth: "120px", //表单文本宽度
      tableData: [{}], //图书分页数据
      count: 0, //记录总数
      page: 1, //当前页码
      pageCount: "", //总页数
      form: {
        status: "",
        createDate: "2017-06-01T00:00:00.000Z",
      },
    };
  },
  methods: {
    onEdit() {
      // this.dialogVisible = true;
      console.log("详情");
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.dialogTitle = "详情";
      this.check = row;
    },
    changePage(currentPage) {
      this.page = currentPage;
      switch (this.tableDataType) {
        case 1:
          this.fetchData();
          break;
        case 2:
          this.onSubmit();
          break;
      }
    },
    fetchData() {
      const pageNum = this.page;
      const pageSize = 10; // 设置每页显示的数据条数
      this.$axios
        .get("http://localhost:8888/check/allcheck", {
          params: { pageNum, pageSize },
        })
        .then((response) => {
          const result = response.data.data;
          this.count = result.size;
          this.pageCount = Math.ceil(result.total / pageSize);
          this.tableData = result.list;
          this.tableDataType = 1;
          const list = result.list;
          list.forEach((item) => {
            const status = item.status;
            switch (status) {
              case 1:
                item.checkStatus = "未审核";
                break;
              case 2:
                item.checkStatus = "审核通过";
                break;
              case 3:
                item.checkStatus = "驳回";
                break;
              default:
                item.checkStatus = "未知状态";
                break;
            }
          });
        })
        .catch((error) => {
          console.error(error);
        });
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      // console.info(form);
      this.check = row;
    },
    cancel() {
      this.dialogVisible = false;
    },
    confirm() {
      ElMessageBox.confirm("你确认要修改吗", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.edit();
          //跳转页面
          setTimeout(() => {
            this.$router.push({ name: "AairnonstopCheck" });
          }, 1000);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已经取消修改",
          });
          this.dialogVisible = false;
        });
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>
    
    <style scoped>
</style>